<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta name="description" content="Your description goes here" />
    <meta name="keywords" content="your,keywords,goes,here" />
    <meta name="author" content="Your Name / Original design by andreasviklund.com" />

    <link rel="stylesheet" href="/static/css/cupertino/jquery-ui-1.8.20.custom.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/static/css/jquery.multiselect.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/static/css/jquery.multiselect.filter.css" type="text/css" media="all" />
    <link rel="stylesheet" href="/static/css/variant-multi.css" type="text/css" media="all" />
    
    <script type="text/javascript" src="/static/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.ui.datepicker-sk.js"></script>    
    <script type="text/javascript" src="/static/js/jquery-ui-1.8.20.custom.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.multiselect.js"></script>
    <script type="text/javascript" src="/static/js/jquery.multiselect.filter.js"></script>
    <script type="text/javascript" src="/static/js/jquery.form.js"></script>
    <script type="text/javascript" src="/static/js/jquery.bgiframe.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dimensions.js"></script>
    <script type="text/javascript" src="/static/js/jquery.tooltip.js"></script>
    <script type="text/javascript" src="/static/js/jquery.validate.js"></script>        
    <script type="text/javascript">
      // TODO move to an external javascript
      $(document).ready(function(){
        $("#company_location").multiselect({
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber mesta",
         selectedText: function(numChecked, numTotal, checkedItems){
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 350, maxWidth: 350, height: 250         
        }).multiselectfilter({placeholder:"klúč. slovo"});
        
        $.datepicker.setDefaults($.datepicker.regional["sk"]);        
        $("#from_date").datepicker({minDate: -{{ min_date_delta }}, maxDate: -1, defaultDate: -2});                                        
        $("#to_date").datepicker({minDate: -{{ min_date_delta }}, maxDate: -1, defaultDate: -1});
        
        $("#company_type").multiselect({
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber právnej formy",         
         selectedText: function(numChecked, numTotal, checkedItems){           
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 350, maxWidth: 350         
        });                
        
        $("#business_type").multiselect({         
         checkAllText: "Všetky", 
         uncheckAllText: "Žiadne",
         noneSelectedText: "Výber predmetu podnikania",         
         selectedText: function(numChecked, numTotal, checkedItems){           
           var selectedText = "";
           for (var i = 0; i < checkedItems.length; i++) {
             if (i < 4) {
               selectedText += checkedItems[i].title + "<br>";
             } else { 
               selectedText += "...";
               break;
             }
           } 
           return selectedText;
         },
         minWidth: 500, maxWidth: 600, height: 300         
        }).multiselectfilter({placeholder:"klúč. slovo"});
                
        
        $( "input:submit").button(); 

        // validation methods        
        $.validator.addMethod("optionRequired", function(value, element) {
            return $(element).multiselect("getChecked").length > 0;
        });
        
        $.validator.addMethod("validFromDate", function(value, element) {
            return $(element).datepicker("getDate") <= $("#to_date").datepicker("getDate");
        });

        $.validator.addMethod("validToDate", function(value, element) {
            return $(element).datepicker("getDate") >= $("#from_date").datepicker("getDate");
        });

        
        // JDR: our form submit and valiation
        var search_form = $("#search_form").validate({
            
            // JDR: make sure we show/hide both blocks
            errorContainer: "#errorblock-div1, #errorblock-div2",
            
            // JDR: put all error messages in a UL
            errorLabelContainer: "#errorblock-div2 ul",
            
            // JDR: wrap all error messages in an LI tag
            wrapper: "li",
            
            // JDR: rules/messages are for the validation
            rules: {
                company_location: "optionRequired",
                from_date: "validFromDate",
                to_date: "validToDate",
                company_type: "optionRequired",
                business_type: "optionRequired"                                         
            },
            messages: {
                company_location: "Vyberte aspon jedno mesto.",
                from_date: "Počiatočný dátum nesmie byť väčší ako konečný.",
                to_date: "Konečný dátum nesmie byť menší ako počiatočný.",
                company_type: "Vyberte aspoň jednu právnu formu.",
                business_type: "Vyberte aspoň jeden predmet podnikania.",
            },
            ignore: ':hidden:not("#city_list") :hidden:not("#company_type_list") :hidden:not("#from_date") :hidden:not("#to_date") :hidden:not("#business_type_list")',
            // JDR: our form submit
            submitHandler: function(form) {
                jQuery(form).ajaxSubmit({
                    // JDR: the return target block
                    target: '#client-script-return-data',
                    
                    // JDR: what to do on form submit success
                    success: function() {}
                 });
             }
        }); 
                      
      });
            
      function getObjectList(url) {
        $('#client-script-return-data').load(url);
        // REVISIT (pd): the tooltip is not working
        $('#company_list *').tooltip();
      }
      
      function getCompanyDetails(id) {
        //$('#client-script-return-data').load('/company/' + id + '/');
        
        var dialog = $("<div class='flora'></div>").insertAfter('#client-script-return-data');  
            $(dialog).load("/company/" + id + "/", function() {  
              $(dialog).dialog({
                title: 'Informácie o firme',                   
                resizable: true,  
                modal: true,  
                width: 400,  
                height: 450  
              });  
              $('.ui-dialog-titlebar-close').click(function() {  
                $('client-script-return-data').remove(dialog);              
              })  
            });                         
      }
            
    </script>        
    <title>Potala</title>
</head>

<body>
<div id="containerfull"><!-- Use"containerfull" for 100% width. For fixed width, use "container980", "container760" or "container600" (the number is the layout width in pixels). -->
    
   <div id="header">
       <div class="leftside">
         <img src="/static/images/potala_logo.png" />
       </div>
       <div class="middle">
             <p>&#187;&nbsp;informácie na mieru pre Vás <br />&#187;&nbsp;podrobné a pravidelne aktualizované dáta <br />&#187;&nbsp;podnikatelia, adresy, firmy</p>
       </div>
    </div>

    <div id="main">
        <div id="content">

		    <!-- JDR: form validation error container -->
		    <div class="ui-widget ui-helper-hidden" id="errorblock-div1">
		        <div class="ui-state-error ui-corner-all" style="padding: 0pt 0.7em;" id="errorblock-div2" style="display:none;"> 
		            <p>
		               <!-- JDR: fancy icon -->
		               <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
		               <strong>Alert:</strong> Errors detected!
		            </p>
		            <!-- JDR: validation plugin will target this UL for error messages -->
		            <ul></ul>
		        </div>
		    </div>
		  
		    <form id="search_form" name="search_form" action="get_company_list" method="GET">{% csrf_token %}
		      <fieldset>
		        <div class="left">
			        <p>
			          <label for="company_location">Sídlo firmy:</label>
			          <br /> 
			          <select id="company_location" name="company_location" multiple="multiple">
			            {% for city in city_list %}
			              <option value="{{ city.id }}">{{ city.name }}</option>
			            {% endfor %}
			          </select>
			        </p>
                    <p>
                      <label for="company_type">Právna forma:</label>
                      <br /> 
                      <select id="company_type" name="company_type" multiple="multiple">
                        {% for company_type in company_type_list %}
                          <option value="{{ company_type.id }}">{{ company_type.type }}</option>
                        {% endfor %}
                      </select>
                    </p>	
                    <input class="submit-btn" value="Vyhľadať" type="submit">		        
			    </div>
		
		        <div class="right">
			        <p>
			          <label for="or_entry_date">Dátum zápisu firmy do Obch. registra:</label>
			          <br />
			          <input id="from_date" name="from_date" value="{{ default_from_date }}" type="text"> - 
			          <input id="to_date" name="to_date" type="text" value="{{ default_to_date }}">
			        </p>
                    <p>
                      <label for="business_type">Predmet podnikania:</label>
                      <br /> 
                      <select id="business_type" name="business_type" multiple="multiple">
                        {% for business in business_list %}
                          <option value="{{ business.id }}">{{ business.business }}</option>
                        {% endfor %}
                      </select>
                    </p>			        
			    </div>
		      </fieldset>
		    </form>
		    
		    <div id="client-script-return-data"></div>
            
        </div>
    </div>
    
    <div id="credits">
        <p>&copy; Your Name<br />
        <span class="small">Template design by <a href="http://andreasviklund.com/">Andreas Viklund</a></span></p>
    </div>  
</div>
</body>
</html>
